<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="box" width="500" height="500">
        您的浏览器不支持画布
    </canvas>
    <script type="text/javascript">
        //https://git.oschina.net/wangwen210/heml5day09.git
        //通过画布获取画笔
        var box=document.getElementById("box");
        var pen=box.getContext("2d");
        //清除画布
        pen.clearRect(0,0,box.width,box.height);

        //画一条直线（起始点，终点）
        pen.moveTo(100,30);
        pen.lineTo(200,30);
        pen.stroke();

        //画三角形
        pen.beginPath();
        pen.moveTo(100,50);
        pen.lineTo(50,100);
        pen.lineTo(150,100);
        pen.closePath();
        pen.stroke();

        //画矩形(rect() fillRect() stroctRect() )
        pen.beginPath();
        pen.rect(160,130,100,150);
        pen.closePath();
        pen.stroke();

        pen.beginPath();
        //fillRect----填充一个矩形，默认为黑色，不用渲染
        //fillRect绘制矩形，设置边框样式的时候没有效果
        pen.fillStyle="red";//设置填充样式
        pen.fillRect(100,300,100,150);
        pen.closePath();

        //带有边框矩形
        pen.beginPath();
        //pen.fillStyle="yellow";
        //strokeRect----绘制带有矩形边框的矩形，不用渲染，有默认的颜色
        //strokeRect绘制的矩形，设置填充样式的时候没有效果
        pen.strokeRect(300,300,100,150);
        pen.closePath();

        //画圆
        pen.beginPath();
        pen.arc(400,100,50,0,Math.PI*2,true);
        pen.closePath();
        pen.stroke();

        //画一条曲线(二次)
        pen.beginPath();
        pen.moveTo(119,221);
        pen.quadraticCurveTo(111,37,372,102);
        pen.stroke();
       //pen.closePath();

    </script>
</body>
</html>